import React from "react";
import PropTypes from "prop-types";
import { connect } from "dva";
import { Row, Col, Button, Table } from "antd";
import {
  filterMediumType,
  filterBorrowState,
  filterReturnResult,
  filterState,
  filterReturnState
} from "utils/filter";
import { formatDate } from "utils";

const Tab = ({ showModal, ...tabProps }) => {
  const columns = [
    {
      title: "档案年度",
      key: "documentYear",
      dataIndex: "documentYear"
    },
    {
      title: "公证事项",
      key: "notarialMatters",
      dataIndex: "notarialMatters",
      render: (text, record) => {
        const datas = text.split("#")
        const ary = []
        datas.map((item, i) => {
          ary.push(
            <p>{item}</p>
          )
        })
        return ary
      }
    },
    {
      title: "申请人",
      key: "applyName",
      dataIndex: "applyName",
      render: (text, record) => {
        const datas = text.split("#")
        const ary = []
        datas.map((item, i) => {
          ary.push(
            <p>{item}</p>
          )
        })
        return ary
      }
    },
    {
      title: "收件日期",
      key: "createdTime",
      dataIndex: "createdTime",
      render: (record, text) => formatDate(record)
    },
    {
      title: "公证日期",
      key: "notarizationAt",
      dataIndex: "notarizationAt",
      render: (record, text) => formatDate(record)
    },
    {
      title: "借阅方式",
      key: "borrowMediumType",
      dataIndex: "borrowMediumType",
      render: (record, text) => filterMediumType(record)
    },
    {
      title: "借阅时间",
      key: "state",
      render: (record, text) => {
        return (
          <div>
            {formatDate(record.borrowStartTime)}
            <span>至</span>
            {formatDate(record.borrowEndTime)}
          </div>
        );
      }
    },
    {
      title: "是否续借",
      key: "renew",
      dataIndex: "renew",
      render: (record, text, index) => {
        return <div>{record == 1 ? "是" : "否"}</div>;
      }
    },
    {
      title: "借阅状态",
      key: "borrowState",
      dataIndex: "borrowState",
      render: (record, text) => filterReturnState(record)
    },
    {
      title: "操作",
      key: "operation",
      render: (record, text) => {
        return <a onClick={() => showModal(record)}>档案归还</a>;
      }
    }
  ];
  return (
    <div>
      <Table columns={columns} {...tabProps} />
    </div>
  );
};

Tab.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default Tab;
